import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Tag, message, Modal } from 'antd'
import { cartAppend } from '../../redux/actions/cartList'
import { createGetProblem } from '../../redux/actions/problem'
import http from '../../api'
import { fmtTypetoCN, fmtNumbertoGrade, fmtNumbertoEN } from '../../utils'
import './index.css'

class ProblemList extends Component {
    state = {
        problemList:[]
    }
    handleEdit = (id,index)=>{
        this.props.edit(this.state.problemList[index])
        this.props.history.push(`/problempool/edit/${id}`)
    }
    handleDelete = (id, index)=>{
        Modal.confirm({
            content:'是否删除？',
            onOk:()=>{
                http.deleteProblem({id}).then(res=>{
                message.success(res.data.message)
                http.getProblem().then((res)=>{
                    message.success('刷新列表')
                    this.setState({problemList:res.data.exam_data})
                })
            })}
        })
    }
    addToCart=(r)=>{
        this.props.add(r)
    }
    componentDidMount(){
        http.getProblem().then((res)=>{
            this.setState({problemList:res.data.exam_data})
        })
    }
    render() {
        if (this.state.problemList.length) {
            return (
                <div style={{width:'100%',height:'100%', overflow:'inherit'}}>
                    
                    {
                        this.state.problemList.map((r,i)=>{
                            return (
                                <div key={r.id} style={{borderBottom:'1px dashed #ccc', padding:'10px'}}>
                                    <div style={{float:'right'}}>
                                        <Button onClick={()=>this.handleEdit(r.id,i)} style={{marginRight:'5px'}} size="small" type="primary">编辑</Button>
                                        <Button onClick={()=>this.handleDelete(r.id,i)} style={{marginRight:'5px'}} size="small" type="danger">删除</Button>
                                        <Button onClick={()=>this.addToCart(r)} size="small">加入试题车</Button>
                                    </div>
                                    <h2 style={{fontWeight:'bold'}}>{i+1}.[{fmtTypetoCN(r.type)}]{r.title}</h2>
                                    <Tag color="cyan">{r.publisher}</Tag>
                                    <Tag color="red">{r.course}</Tag>
                                    <Tag color="green">{fmtNumbertoGrade(r.grade)}</Tag>
                                    <ul style={{fontSize:'18px',fontWeight:'bold'}}>
                                        {r.options.map((r,i)=>
                                            <li key={i}>{fmtNumbertoEN(i)+'. '+r.text} </li>
                                        )}
                                    </ul>
                                    <div style={{fontSize:'18px',fontWeight:'bold', whiteSpace:'pre-line'}}>
                                        答案： {r.answer}
                                    </div>
                                    <div style={{fontSize:'18px',fontWeight:'bold', margin:'10px 0'}}>
                                        解析： {r.desc}
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            );
        } else{
            return(
                <h2>你还没有创建题目，快去创建吧！</h2>
            )
        }

    }
}

export default connect(
    state=>({ editProblem:state.problem, }),
    {add:cartAppend, edit:createGetProblem}
)(ProblemList)
